<template>
  <el-dialog v-model="visible"
             :title="dialogForm.id?'编辑':'新增'"
             width="440px"
             header-class="border-b"
             body-class="px-0 pt-4"
             footer-class="border-t">
    <el-form :model="dialogForm" :rules="dialogFormRules" label-width="auto" style="">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="dialogForm.name" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentId">
        <el-tree-select v-model="dialogForm.parentId"
                        :data="menuTree"
                        placeholder="请选择"
                        check-strictly
                        clearable
                        :render-after-expand="false"/>
      </el-form-item>
      <el-form-item label="菜单编码" prop="code">
        <el-input v-model="dialogForm.code" placeholder="请输入菜单编码"/>
      </el-form-item>
      <el-form-item label="菜单状态" prop="status">
        <el-select v-model="dialogForm.status" clearable placeholder="请选择">
          <el-option v-for="item in ENABLE_OPTIONS"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="打开方式" prop="openMode">
        <el-select v-model="dialogForm.openMode" placeholder="请选择">
          <el-option v-for="(value, key) in APP_MENU_OPEN_METHOD"
                     :key="key"
                     :disabled="key === 'PopUpWindow'"
                     :label="value"
                     :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="打开目标" prop="targetType">
        <el-select v-model="dialogForm.targetType" clearable placeholder="请选择" @change="onTargetTypeChange">
          <el-option v-for="(value, key) in APP_MENU_TARGET_TYPE"
                     :key="key"
                     :disabled="dialogForm.openMode === 'NewWebPage'"
                     :label="value"
                     :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item v-if="dialogForm.targetType === 'Workflow'" label="流程表单">
        <el-select v-model="dialogForm.formId" clearable placeholder="流程表单">
          <el-option v-for="(item, index) in workflowList" :key="item.id" :label="item.name" :value="item.id">
            <span style="float: left">{{ item.name }}</span>
            <span v-if="item.definitionStatus==='Yes'" style="float: right;color: var(--el-color-success);font-size: 13px;">{{ item.vDefinitionStatusText }}</span>
            <span v-else style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.vDefinitionStatusText }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item v-if="dialogForm.targetType === 'Process'" label="流程编码">-->
      <!--        <el-input v-model="dialogForm.customProcessDefinitionCode" placeholder="流程编码"/>-->
      <!--      </el-form-item>-->
      <el-form-item v-if="dialogForm.targetType === 'Link'" label="链接" prop="url">
        <el-input v-model="dialogForm.url" placeholder="请输入链接"/>
      </el-form-item>
      <el-form-item v-if="dialogForm.targetType === 'FormOrView'" label="视图/表单" prop="formId">
        <el-select v-model="dialogForm.formId" clearable placeholder="视图/表单">
          <el-option v-for="(item, index) in formOrViewList" :key="index" :label="item.formName" :value="item.id">
            <span style="float: left">{{ item.formName }}</span>
            <span v-if="item.actualFormType==='ViewForm'" style="float: right;color: var(--el-color-success);font-size: 13px;">自定义视图</span>
            <span v-if="item.actualFormType==='OnlineTable'" style="float: right;color: var(--el-color-danger);font-size: 13px;">在线数据表视图</span>
            <span v-if="item.actualFormType==='OrdinaryForm'" style="float: right;color: var(--el-color-info);font-size: 13px;">自定义普通表单</span>
            <span v-if="item.actualFormType==='ProcessForm'" style="float: right;color: var(--el-color-warning);font-size: 13px;">自定义流程表单</span>
            <!--            <span v-else style="float: right;color: var(&#45;&#45;el-text-color-secondary);font-size: 13px;">{{ item.vDefinitionStatusText }}</span>-->
          </el-option>
        </el-select>
      </el-form-item>


      <!--        <el-form-item v-if="dialogForm.targetType === 'Link'" label="权限码配置" prop="uiAuthCodes">-->
      <!--          <el-input v-model="uiAuthCodes"-->
      <!--                    :autosize="{ minRows: 2 }"-->
      <!--                    placeholder="[{&quot;code&quot;:&quot;权限码1&quot;,&quot;name&quot;:&quot;权限码名称1&quot;}]"-->
      <!--                    type="textarea"/>-->
      <!--          <span v-show="isShow" class="tip">请输入数组形式的数据</span>-->
      <!--          &lt;!&ndash; <codemirror-view v-model="uiAuthCodes" mode="application/json"/> &ndash;&gt;-->
      <!--        </el-form-item>-->
      <el-form-item label="排序desc" prop="seq">
        <el-input-number v-model="dialogForm.seq" controls-position="right" :min="0" placeholder="请输入排序" class="w-full text-left"/>
      </el-form-item>
      <!--        <el-form-item label="菜单图标" prop="iconUrl">-->
      <!--          <div class="flex">-->
      <!--            <svg aria-hidden="true" class="app-center-icon pointer" @click="toSelectIcon">-->
      <!--              <use :href="'#' + dialogForm.iconUrl"/>-->
      <!--            </svg>-->
      <!--            &lt;!&ndash; <i class="app-center-icon pointer" :class="[dialogForm.iconUrl, 'iconfont']" @click="toSelectIcon"/> &ndash;&gt;-->
      <!--            <el-button-->
      <!--                v-if="dialogForm.iconUrl"-->
      <!--                class="margin-left-xs"-->
      <!--                size="mini"-->
      <!--                type="text"-->
      <!--                @click="dialogForm.iconUrl = null">取消选择-->
      <!--            </el-button>-->
      <!--          </div>-->
      <!--        </el-form-item>-->
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="visible=false">关闭</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, nextTick, onBeforeUnmount} from 'vue'
import {useRouter} from 'vue-router';
import defaultLogo from "@/assets/images/default-logo.png";
import defaultAvatar from "@/assets/images/default-avatar.jpg";
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";
import {APP_MENU_OPEN_METHOD, APP_MENU_TARGET_TYPE, ENABLE_OPTIONS} from "@/utils/constant.js";
import {arrayToElTreeSelectData} from "@/utils/misc.js";


/////////////////////////////////   私有变量定义    //////////////////////////
const $router = useRouter();
const visible = ref(false);
const tenantInfo = ref({
  id: "",
  logo: defaultLogo,
  tenantCode: '',
  systemName: ''
})
const myProfile = ref({
  avatarUrl: defaultAvatar,
  realName: ''
})
const curApplication = ref({
  id: '',
})
const dialogForm = ref({})
const formOrViewList = ref([])
const workflowList = ref([])
const menuTree = ref([])

const dialogFormRules = ref({
  name: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
  code: [{required: true, message: '请输入菜单编码', trigger: 'blur'}],
  status: [{required: true, message: '请选择菜单状态', trigger: 'change'}],
  openMode: [{required: true, message: '请选择打开方式', trigger: 'change'}],
})
/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  tenantInfo.value = $localStorage.getTenantInfo()
  myProfile.value = $localStorage.getMyProfile()
  curApplication.value = $localStorage.getCurApplicationInfo()
  getMenuAsTree()
});
onBeforeUnmount(() => {
})
onUnmounted(() => {
});
/////////////////////////////////   页面方法    //////////////////////////
const show = async (data) => {
  visible.value = true
  if (data) dialogForm.value = data
  await nextTick();
}
const onSave = () => {
  const data = {}
  $apiService.saveAppMenu(data).then(res => {

  })
}
const doPublish = () => {
}
const getFormOrViewListListByApp = () => {
  const data = {
    params: {
      tenantApplicationId: curApplication.value.id,
      // definitionStatus: 'Yes',
    },
    all: true,
    sort: ['formName,asc'],
  }
  $apiService.getFormList(data).then((res) => {
    formOrViewList.value = res.data.data.content
    //     .filter((item) => {
    //   // 过滤出所有表单，用于视图筛选
    //   const {actualFormType} = item
    //   return actualFormType === 'ProcessForm'
    // })
  })
}
const getWorkflowListByApp = () => {
  const data = {
    params: {
      // applicationId: curApplication.value.id,
      // definitionStatus: 'Yes',
    },
    all: true,
    sort: ['name,asc'],
  }
  $apiService.getCustomProcessList(data).then((res) => {
    workflowList.value = res.data.data.content
    //     .filter((item) => {
    //   // 过滤出所有表单，用于视图筛选
    //   const {actualFormType} = item
    //   return actualFormType === 'ProcessForm'
    // })
  })
}
const getMenuAsTree = () => {
  const queryForm = {
    params: {
      tenantApplicationId: $localStorage.getCurApplicationInfo().id,
    },
    all: true,
  }
  $apiService.getAppMenuForSetting(queryForm).then((res) => {
    const data = res.data.data.content.filter((item) => item.id !== dialogForm.value.id)
    menuTree.value = arrayToElTreeSelectData(data)
  })
}
const ddd = () => {
}
const onTargetTypeChange = () => {
  if (dialogForm.value.targetType === 'FormOrView') {
    getFormOrViewListListByApp()
  }
  if (dialogForm.value.targetType === 'Process' && workflowList.value.length === 0) {
    getWorkflowListByApp()
  }
}


/////////////////////////////////   暴露内部方法，让父组件可以访问    //////////////////////////
defineExpose({
  show
});
</script>

<style scoped>

:deep(.el-tabs__content) {
  padding: 0;
}
</style>
